import {
  defineComponent,
  reactive,
  DefineComponent,
  markRaw,
  watch,
} from "vue";
import { injectAppNavigator } from "./app-navigator";

export const AppNavigatorPage = defineComponent({
  setup() {
    const state = reactive({
      PageComponent: null as null | DefineComponent,
    });

    const navigator = injectAppNavigator();

    const utils = {
      reset: async () => {
        let { path } = navigator.state.route;
        if (!path) {
          return;
        }
        if (path.charAt(0) === "/") {
          path = path.slice(1);
        }
        const Component = (await import("story/pages/" + path)).default;
        state.PageComponent = markRaw(Component);
      },
    };

    watch(() => navigator.state.route.path, utils.reset, { immediate: true });

    return () => {
      const { PageComponent } = state;

      return (
        <div class="app-navigator-page">
          {!!PageComponent ? <PageComponent /> : null}
        </div>
      );
    };
  },
});
